<template>
  <div class="checkboxGroup">
    <el-checkbox-group v-model="value" @change="$emit('change', $event)">
      <el-checkbox v-for="item in handleLists" :key="item.name" :label="item.namePy">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <el-button @click="onMore" v-if="lists.length > max">更多</el-button>

    <el-dialog title="全部选项" :visible.sync="isPop" width="300px" top="25vh" append-to-body custom-class="checkboxPop">
      <el-checkbox-group v-model="value1" @change="$emit('change', $event)">
        <el-checkbox v-for="item in lists" :key="item.name" :label="item.namePy">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button @click="onClose">取消</el-button>
        <el-button @click="onAffirm" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "checkboxGroup",
  inject: {
    getLists: { default: () => [] }
  },
  model: {
    prop: "v",
    event: "change"
  },
  props: {
    v: Array,
    names: {
      type: Array,
      default: () => []
    },
    max: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      value: [],
      value1: [],
      isPop: false,
      lists: []
    };
  },
  computed: {
    handleLists() {
      let arr = this.lists.slice(0, this.max);
      arr.push(...this.lists.slice(this.max).filter(item => this.value.includes(item.namePy)));
      return arr;
    }
  },
  methods: {
    getList() {
      const arr = this.getLists(this.names);
      return this.getColumnList(arr);
    },
    getColumnList(arr) {
      const newArr = arr.map(item => item.columnList).flat();
      console.log(newArr);
      return newArr.filter(item => item.isVisible);
    },
    onMore() {
      this.isPop = true;
      this.value1 = [...this.value];
    },
    onClose() {
      this.isPop = false;
    },
    onAffirm() {
      this.isPop = false;
      this.value = [...this.value1];
    }
  },
  mounted() {
    this.value = this.v;
    this.lists = this.getList();
  }
};
</script>
<style lang="less">
.checkboxGroup {
  display: flex;
  align-items: center;
  .el-checkbox-group{
    display: flex;
    flex-wrap: wrap;
    width: 650px;
  }
  .el-button {
    margin-left: 20px;
  }
}
.checkboxPop {
  .el-checkbox-group {
    margin: 10px;
    display: flex;
    flex-direction: column;
    .el-checkbox {
      margin: 5px 0;
    }
  }
}
</style>
